<!--<html>-->
<!--<head>-->
    <!--<title>Camera</title>-->
<!--</head>-->
<!--<body>-->
<!--<video src="" id="iv" style="width:500px;height: 500px" autoplay="autoplay"></video>-->
<!--</body>-->

<!--<script type="text/javascript">-->
    <!--//web rtc 调用摄像头(兼容性写法(谷歌、火狐、ie))-->

    <!--navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;-->

    <!--//调用成功会回调返回一个stream流 video:true 表示采集视频,audio:true 表示采集声音,反之就都不采集。-->

    <!--navigator.getUserMedia({video:true,audio:false},function(stream){-->

        <!--//将采集到的视频信息显示在video标签中-->

        <!--video.srcObject = stream;-->

    <!--},console.log)-->
<!--</script>-->

<!--</html>-->


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频</title>
    <!--<link rel="stylesheet" type="text/css" href="css/normalize.css" />&lt;!&ndash;CSS RESET&ndash;&gt;-->
    <!--<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">&lt;!&ndash;演示页面样式，使用时可以不引用&ndash;&gt;-->
    <link href="css/jCircle.css" rel="stylesheet">
    <style type="text/css">
        .container{
            width: 800px;
            /*margin: 30px auto;*/
        }
    </style>
<body>

<video id="video" controls="controls" width="80%" heigth="80%" autoplay="" src="video/1.mp4" >

</video>
<!--<div><button id='picture' style="width: 100%;">PICTURE</button></div>-->
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
    var video = document.getElementById("video");
    var context = canvas.getContext("2d");
    var errocb = function () {
        console.log('sth wrong!');
    }

    if (navigator.getUserMedia) { // 标准的API
        navigator.getUserMedia({ "video": true }, function (stream) {
            video.src = stream;
            video.play();

        }, errocb);
    } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
        navigator.webkitGetUserMedia({ "video": true }, function (stream) {
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errocb);
    };

    // document.getElementById("picture").addEventListener("click", function () {
    //     context.drawImage(video, 0, 0, 640, 480);
    // });
</script>
</body>
</html>

<!--<!DOCTYPE html>-->
<!--<html lang="zh">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--<title>视频</title>-->
<!--&lt;!&ndash;<link rel="stylesheet" type="text/css" href="css/normalize.css" />&lt;!&ndash;CSS RESET&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">&lt;!&ndash;演示页面样式，使用时可以不引用&ndash;&gt;&ndash;&gt;-->
<!--<link href="css/jCircle.css" rel="stylesheet">-->
<!--<style type="text/css">-->
<!--.container{-->
<!--width: 800px;-->
<!--/*margin: 30px auto;*/-->
<!--}-->
<!--</style>-->
<!--<body>-->

<!--&lt;!&ndash;video用于显示媒体设备的视频流，自动播放&ndash;&gt;-->
<!--<video id="video" autoplay style="width: 480px;height: 320px">-->
<!--</video>-->
<!--&lt;!&ndash;拍照按钮&ndash;&gt;-->
<!--<div>-->
    <!--<button id="capture">拍照</button>-->
<!--</div>-->
<!--&lt;!&ndash;描绘video截图&ndash;&gt;-->
<!--<canvas id="canvas" width="480" height="320"></canvas>-->
<!--<script>-->
    <!--//访问用户媒体设备的兼容方法-->
    <!--function getUserMedia(constrains,success,error){-->
        <!--if(navigator.mediaDevices.getUserMedia){-->
            <!--//最新标准API-->
            <!--navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);-->
        <!--} else if (navigator.webkitGetUserMedia){-->
            <!--//webkit内核浏览器-->
            <!--navigator.webkitGetUserMedia(constrains).then(success).catch(error);-->
        <!--} else if (navigator.mozGetUserMedia){-->
            <!--//Firefox浏览器-->
            <!--navagator.mozGetUserMedia(constrains).then(success).catch(error);-->
        <!--} else if (navigator.getUserMedia){-->
            <!--//旧版API-->
            <!--navigator.getUserMedia(constrains).then(success).catch(error);-->
        <!--}-->
    <!--}-->

    <!--var video = document.getElementById("video");-->
    <!--var canvas = document.getElementById("canvas");-->
    <!--var context = canvas.getContext("2d");-->

    <!--//成功的回调函数-->
    <!--function success(stream){-->
        <!--//兼容webkit内核浏览器-->
        <!--var CompatibleURL = window.URL || window.webkitURL;-->
        <!--//将视频流设置为video元素的源-->
        <!--video.src = CompatibleURL.createObjectURL(stream);-->
        <!--//播放视频-->
        <!--video.play();-->
    <!--}-->

    <!--//异常的回调函数-->
    <!--function error(error){-->
        <!--console.log("访问用户媒体设备失败：",error.name,error.message);-->
    <!--}-->
    <!--if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){-->
        <!--//调用用户媒体设备，访问摄像头-->
        <!--getUserMedia({-->
            <!--video:{width:480,height:320}-->
        <!--},success,error);-->
    <!--} else {-->
        <!--alert("你的浏览器不支持访问用户媒体设备");-->
    <!--}-->

    <!--//注册拍照按钮的单击事件-->
    <!--document.getElementById("capture").addEventListener("click",function(){-->
        <!--//绘制画面-->
        <!--context.drawImage(video,0,0,480,320);-->
    <!--});-->
<!--</script>-->
<!--</body>-->
<!--</html>-->